<template>
  <div class="Yg-Home">
    <el-container>
      <el-header style="height: 50px; background-color: #299cf0">
        <el-row :gutter="10">
          <el-col
            :xs="iconShow ? 2 : 4"
            :sm="iconShow ? 2 : 4"
            :md="iconShow ? 2 : 4"
            :lg="iconShow ? 3 : 4"
            :xl="iconShow ? 3 : 4"
          >
            <div class="grid-content yg-log" style="height: 50px">
              <img v-if="iconShow" src="../../assets/img/log/log.jpg" alt="" />
              <span v-else>后台管理</span>
              <div
                class="show-icon"
                style="cursor: pointer"
                @click="isIconShow"
              >
                <i class="el-icon-s-fold" v-if="!iconShow"></i>
                <i class="el-icon-s-unfold" v-else></i>
              </div>
            </div>
          </el-col>
          <el-col
            :xs="iconShow ? 10 : 8"
            :sm="iconShow ? 8 : 6"
            :md="iconShow ? 7 : 5"
            :lg="iconShow ? 9 : 8"
            :xl="iconShow ? 9 : 8"
          >
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :xs="4" :sm="8" :md="9" :lg="6" :xl="6">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple-light">
              <el-row>
                <el-col :span="16">
                  <div class="grid-content bg-purple" icon="el-icon-refresh">
                    <el-popconfirm
                      @confirm="resetJava()"
                      title="确定重启后台服务吗？"
                    >
                      <template #reference>
                        <!-- <div> -->
                        <el-tooltip content="重启后台" placement="top">
                          <i
                            class="el-icon-coin icon-item"
                            @click="resetServe"
                          ></i>
                        </el-tooltip>
                        <!-- </div> -->
                      </template>
                    </el-popconfirm>
                    <el-tooltip content="后台日志" placement="top">
                      <i class="el-icon-tickets icon-item" @click="loginfo"></i>
                    </el-tooltip>
                    <el-tooltip content="刷新页面" placement="top">
                      <i class="el-icon-refresh icon-item" @click="resset"></i>
                    </el-tooltip>
                    <el-badge
                      :value="TableList.length"
                      :max="99"
                      :hidden="TableList.length < 1"
                      class="item"
                      style="margin-top: -3px"
                    >
                      <i
                        class="iconfont icon-tixing icon-item"
                        @click="drawer = true"
                      ></i>
                    </el-badge>
                  </div>
                  <el-drawer
                    title="我是标题"
                    :visible.sync="drawer"
                    :with-header="false"
                    @close="CloseDrawer"
                    size="70%"
                  >
                    <yg-table
                      :columns="columns"
                      :tableList="TableList"
                      :height="'900'"
                    ></yg-table>
                  </el-drawer>
                </el-col>
                <el-col :span="4">
                  <div
                    class="grid-content bg-purple"
                    style="display: flex; min-width: 108px"
                  >
                    <!-- <h3 style="margin: 0; font-size: 14px">欢迎回来!</h3> -->
                    <h3 style="margin: 0; font-size: 14px">
                      {{ userName }}
                    </h3>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-dropdown
                      style="text-align: center; display: block"
                      placement="top"
                      size="small"
                      @command="handleCommand"
                    >
                      <span class="el-dropdown-link">
                        <i
                          class="el-icon-user-solid"
                          style="font-size: 25px; cursor: pointer"
                        ></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a"
                          >退出登录</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside
          :width="iconShow ? '70px' : '150px'"
          style="background: #324157"
        >
          <el-menu
            unique-opened
            :collapse="iconShow"
            :collapse-transition="false"
            router
            :default-active="activePath"
            background-color="#324157"
            text-color="#a7b1c2"
          >
            <el-menu-item
              :index="'/' + item.path"
              v-for="(item, index) in MenuList"
              :key="index"
              @click="savePath('/' + item.path)"
            >
              <i :class="item.icon"></i>
              <template slot="title">
                <span>{{ item.name }}</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container id="el-box">
          <yg-breadcrumb></yg-breadcrumb>
          <el-main class="el-top" style="padding: 0 5px">
            <router-view></router-view>
          </el-main>
          <div id="resize" title="收缩侧边栏"></div>
          <el-footer id="el-bottom">
            <div class="operation">
              <div style="float: right">
                <i
                  class="el-icon-delete"
                  style="color: red"
                  @click="LogList = []"
                ></i>
              </div>
            </div>

            <div class="item-list">
              <div
                style="
                  font-size: 12px;
                  color: black;
                  display: flex;
                  font-weight: 600;
                "
              >
                <div>时间</div>
                <div style="margin-left: 170px">日志内容</div>
              </div>
              <div
                v-for="(item, index) in LogList"
                :key="index"
                style="font-size: 12px; color: #299cf0; display: flex"
              >
                <div>{{ item.time }}</div>
                <div style="color: black; margin-left: 20px">
                  {{ item.msg }}
                </div>
              </div>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import menu from "../../utils/Menu/menu";
import store from "@/store/index.js";
import { myStorage } from "../../utils/localStorage/index";
import YgBreadcrumb from "@/components/Breadcrumb/YgBreadcrumb.vue";
import YgTable from "@/components/Table/YgTable.vue";
import {
  setMessageCallback,
  removeMessageCallback,
  publishMsg,
  checkSpecialId,
} from "@/mqtt";
export default {
  name: "YgHome",
  inject: ["reload"],
  components: {
    YgBreadcrumb,
    YgTable,
  },
  data() {
    return {
      iconShow: false,
      isBottomShow: false,
      offsetWidth: "", //浏览器宽度
      MenuList: menu.menuList,
      activePath: "", // 保存菜单激活状态
      userName: myStorage.get("UserName"),
      // userName: this.$store.state.userName,
      drawer: false, //抽屉
      TableList: [],
      columns: [
        {
          prop: "update_time",
          label: "告警时间",
          align: "left",
          width: 200,
        },
        {
          prop: "id",
          label: "数据id",
        },
        {
          prop: "name",
          label: "数据名称",
          width: 70,
        },
        {
          prop: "desc",
          label: "数据描述",
          width: 70,
        },
        {
          prop: "alarm_type",
          label: "告警类型",
          formatter(row) {
            if (row.hasOwnProperty("alarm_type")) {
              if (row.alarm_type == "1") {
                return "遥信变位";
              }
              if (row.alarm_type == "2") {
                return "遥测越限";
              }
              if (row.alarm_type == "3") {
                return "网关事件";
              }
              if (row.alarm_type == "4") {
                return "终端事件";
              }
              if (row.alarm_type == "5") {
                return "遥控事件";
              }
              if (row.alarm_type == "6") {
                return "遥调事件";
              }
            } else {
              return "";
            }
          },
        },
        {
          prop: "alarm_desc",
          label: "告警描述",
          width: 250,
        },
        {
          prop: "value",
          label: "告警值",
          width: 70,
        },
        {
          prop: "unit",
          label: "告警单位",
          width: 70,
        },
      ],
      boxHeight: 0,
      LogList: [],
    };
  },
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  },
  beforeMount() {},
  mounted() {
    setMessageCallback(this.onMessage);
    //监听浏览器宽度
    this.offsetWidth = document.body.offsetWidth;
    window.onresize = () => {
      return (() => {
        this.offsetWidth = document.body.offsetWidth;
      })();
    };
    this.dragSlidBar(20);
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
  watch: {
    //监听浏览器宽度 让菜单收缩
    offsetWidth(val) {
      if (val < 1366) {
        this.iconShow = true;
      }
    },
  },
  methods: {
    onMessage(topic, msg) {
      // console.log("home mqtt 消息", topic, msg);
      switch (msg.webMsgType) {
        case 1004:
          switch (msg.funCode) {
            case 0:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  return this.$message.error(msg.retMsg);
                } else {
                  myStorage.set("isLogin", false);
                  myStorage.set("limits", null);
                  myStorage.remove("has");
                  this.$router.push("/Login");
                  this.$message.success("您已退出登录！");
                }
              }
              break;
            default:
              break;
          }
          break;
        case 1000:
          switch (msg.funCode) {
            case 2:
              if (msg.data) {
                if (this.LogList.length > 99) {
                  this.LogList.pop();
                }
                this.LogList.unshift(msg.data);
              }
              break;
            default:
              break;
          }
          break;
        case 1019:
          switch (msg.funCode) {
            case 2:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              if (msg.data) {
                if (this.TableList.length > 99) {
                  this.TableList.pop();
                }
                this.TableList.unshift(msg.data);
              }
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
    CloseDrawer() {
      this.TableList = [];
    },
    resset() {
      this.reload();
    },
    loginfo() {
      const newurl = this.$router.resolve({ name: "/LogView" });
      window.open(newurl.location.name, "_blank");
    },
    resetServe() {},
    resetJava() {
      let resetMsg = {
        webMsgType: 1000,
        funCode: 5,
      };
      publishMsg(resetMsg);
    },
    isIconShow() {
      this.iconShow = !this.iconShow;
    },
    //隐藏底部对话框
    isBottomClick() {
      this.isBottomShow = !this.isBottomShow;
    },
    handleCommand() {
      let sendMsg = {
        webMsgType: 1004,
        funCode: 0,
      };
      publishMsg(sendMsg);
    },
    //保存菜单路径
    savePath(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
    dragSlidBar(delay) {
      const dragBtn = document.getElementById("resize");
      const slideBarBox = document.getElementById("el-bottom");
      let slideBarWidth = 60;
      //鼠标按下
      dragBtn.onmousedown = function (e) {
        //记录鼠标开始位置
        let startY = e.clientY;
        //防抖初始时间
        let init_time = 0;
        //给得是document绑定事件
        document.onmousemove = function (e) {
          // 防抖
          let now_time = new Date(); //现在时间
          if (now_time - init_time > delay) {
            //满足时间则执行
            init_time = now_time;
            //记录鼠标位置
            let endY = e.clientY;
            //计算鼠标移动距离
            // debugger
            let moveY = endY - startY;
            // 更新鼠标初始位置
            startY = endY;
            // 更新盒子宽度
            slideBarWidth += -moveY;
            // 边界值处理
            if (slideBarWidth < 50) {
              slideBarWidth = 50;
            }
            if (slideBarWidth > 400) {
              slideBarWidth = 400;
            }
            slideBarBox.style.height = slideBarWidth + "px";
          }
          return false; //阻止默认事件
        };
        //解除事件
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          // 释放鼠标
          dragBtn.releaseCapture && dragBtn.releaseCapture();
        };
        // 捕获鼠标
        dragBtn.setCapture && dragBtn.setCapture();
        return false; //阻止默认事件
      };
    },
    /**
     * 关闭侧栏
     */
    closeSlideBar() {
      const slideBarBox = document.getElementById("el-bottom");
      slideBarBox.style.height = "60px";
      slideBarBox.style.transition = "width 1s";
    },
    /**
     * 打开侧栏
     */
    openSlideBar() {
      const slideBarBox = document.getElementById("el-bottom");
      slideBarBox.style.height = "200px";
      setTimeout(() => {
        slideBarBox.style.transition = "width 0s";
      }, 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
.Yg-Home {
  height: 100%;
  width: 100%;
  background: rgb(235, 232, 232);
  background-size: 100% 100%;
  background-attachment: fixed;
  margin: 0 auto;
}

.el-header {
  margin: 0;
  padding: 0;

  .yg-log {
    margin-left: 10px;
    line-height: 50px;
    display: flex;

    img {
      width: 40px;
      height: 40px;
      margin-top: 5px;
      border-radius: 30%;
    }

    span {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
    }

    .show-icon {
      display: inline-block;
      width: 50px;
      font-size: 30px;
      color: #fff;
      margin-left: 20px;
    }
  }
}

.el-container {
  height: 100%;
  // width: 100%;
  overflow: hidden;
}

.el-menu {
  border-right: none;
}

.el-menu-item {
  height: 35px;
  line-height: 35px;
}

.el-menu-item:hover {
  background-color: #3e86b9 !important;
}

.el-menu li:hover {
  color: #fff !important;
}

.el-row {
  height: 50px;
}

.el-col {
  border-radius: 4px;
  line-height: 50px;
}

.icon-item {
  font-size: 22px;
  width: 20px;
  height: 20px;
  color: #d6d6d6;
  margin: 0px 15px;
  cursor: pointer;
}

.icon-item:hover {
  color: rgb(78, 81, 83);
}

.bg-purple-dark {
}

.bg-purple {
  img {
    width: 40px;
    height: 40px;
    border-radius: 30%;
  }
}

.bg-purple-light {
  .show-icon {
    width: 50px;
    font-size: 30px;
    color: #fff;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 50px;
}

::v-deep .el-badge__content {
  height: 13px;
  line-height: 13px;
  padding: 0 2px;
}

::v-deep .el-badge__content.is-fixed {
  top: 10px;
  right: 20px;
}

/*拖拽区div样式*/
#resize {
  cursor: n-resize;
  background-color: #d6d6d6;
  border-radius: 5px;
  width: 100%;
  height: 4px;
  background-size: cover;
  background-position: center;
  font-size: 18px;
  color: white;
}

/*拖拽区鼠标悬停样式*/
#resize:hover {
  background-color: #828080;
}

.el-footer {
  padding: 0;
  background-color: #fff;
}

.operation {
  width: 100%;
  height: 20px;
  line-height: 20px;

  // background-color: pink;
  div {
    margin-right: 10px;

    i {
      margin: 0 7px;
      cursor: pointer;
      color: rgb(109, 107, 107);
    }
  }
}

.item-list {
  height: calc(100% - 20px);
  overflow: auto;
  white-space: nowrap;
  padding: 0 15px;
}

.footer-hide {
  height: 60px !important;
}

.footer-show {
  height: 200px !important;
}
</style>
